import React from 'react';
import {Avatar, Breadcrumb, Dropdown, Space, Layout, Menu} from "antd";
import {Link} from "react-router-dom";
import {HomeOutlined, LoginOutlined} from "@ant-design/icons";

const menu = (
    <Menu
        items={[
            {
                key: '1',
                label: (
                    <Link to={"/"}>返回首页</Link>
                ),
                icon: <HomeOutlined />
            },
            {
                key: '2',
                label: (
                    <Link to={"/"}>退出登陆</Link>
                ),
                icon: <LoginOutlined />
            },
        ]}
    />
);
function IndexHeader() {
    return (
        <Layout.Header className="site-layout-background" style={{ padding: 0 }} >
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>


            <Space>
                <span>欢迎回来xxxxn！</span>
                <Dropdown overlay={menu}>
                    <a onClick={e => e.preventDefault()}>
                        <Avatar src="https://joeschmoe.io/api/v1/random" />
                    </a>
                </Dropdown>
            </Space>

        </Layout.Header>
    );
}

export default IndexHeader;